<template>
	<view class="main-page">
		<image class="header-bg" src="../../static/mine/bg_header_analysis.png"></image>
		<view class="title-box" v-if="!hasFlow">
			<image class="back-ic" src="../../static/common/ic_back_white.png" @click="goBack"></image>
			<text class="font-fff-36 font-weight-600">员工绩效</text>
		</view>
		<view class="title-box-fixed" v-else>
			<view class="row-container-center width-100p height-88" 
			style="position: relative;">
				<image class="back-ic" src="../../static/common/ic_back.png" @click="goBack"></image>
				<text class="font-333-36 font-weight-600">员工绩效</text>
			</view>
		</view>
		<view class="count-box">
			<text class="font-666-28">服务总次数（次）</text>
			<text class="font-333-44 font-weight-600">{{allCount}}</text>
		</view>
		
		<view class="content-box">
			<view class="row-container-row-between width-100p">
				<view class="row-container">
					<view class="title-line"></view>
					<text class="font-333-32 font-weight-600">筛选</text>
				</view>
				<text class="reset" @click="clickReset">重置</text>
			</view>
			
			<view class="row-container height-88">
				<uni-datetime-picker
					class="width-100p"
					type="daterange"
					rangeSeparator="至"
					return-type="string"
					@change="changeDateRange"
				>
					<view class="option-box mt-20">
						<view class="row-container">
							<image class="wh-36 mr-6" src="../../static/common/ic_cal_grey.png"></image>
							<text class="font-666-28">日期</text>
						</view>
						<view class="row-container">
							<text class="font-333-28 font-weight-600 mr-4">
							{{startDate && endDate ? startDate + "  至  " + endDate : '全部'}}</text>
							<image src="../../static/common/ic_arrow_right.png" class="wh-20"></image>
						</view>
					</view>
				</uni-datetime-picker>
			</view>
			
			<view class="row-container mt-20 height-88 width-100p">
				<picker mode="selector" :range="allServiceList" range-key="itemName"
				 @change="changeParentService" class="width-50p mr-10">
					<view class="option-box ">
						<text class="font-666-28">大类</text>
						<view class="row-container">
							<text class="font-333-28 font-weight-600 mr-4">
							{{parentName ? parentName : '全部'}}</text>
							<image src="../../static/common/ic_arrow_right.png" class="wh-20"></image>
						</view>
					</view>
				</picker>
				<picker mode="selector" :range="childList" range-key="itemName"
				 @change="changeServiceItem" class="width-50p ml-10" :disabled="childList.length < 1">
					<view class="option-box">
						<text class="font-666-28">服务</text>
						<view class="row-container">
							<text class="font-333-28 font-weight-600 mr-4">
							{{itemName ? itemName : '全部'}}</text>
							<image src="../../static/common/ic_arrow_right.png" class="wh-20"></image>
						</view>
					</view>
				</picker>
			</view>
			<view class="row-container mt-10 height-88 width-100p">
				<picker mode="selector" :range="allEmployeeList" range-key="userName"
				 @change="changStaff" style="width: calc(50% - 10rpx);">
					<view class="option-box">
						<text class="font-666-28">员工</text>
						<view class="row-container">
							<text class="font-333-28 font-weight-600 mr-4">
							{{staffName ? staffName : '全部'}}</text>
							<image src="../../static/common/ic_arrow_right.png" class="wh-20"></image>
						</view>
					</view>
				</picker>
			</view>
			
			
			<view class="row-container-row-between width-100p mt-40">
				<view class="row-container">
					<view class="title-line"></view>
					<text class="font-333-32 font-weight-600">员工绩效</text>
				</view>
				<text class="font-666-28">共计{{listCount}}条</text>
			</view>
			<view class="row-container height-82">
				<!-- <text class="font-999-26 width-82">序号</text> -->
				<text class="font-999-26 width-158 ml-20">员工</text>
				<text class="font-999-26 width-240 ml-20 font-center">服务项</text>
				<text class="font-999-26 grow-text">时间</text>
			</view>
			<view class="divider-1" style="width: 100%;"></view>
			<view class="row-container width-100p height-100" v-for="(item , index) in dataList" :key="index">
				<!-- <text class="font-333-28 width-82" style="flex-shrink: 0;">{{index + 1}}</text> -->
				<text class="font-333-28 width-158 ml-20 font-weight-600" style="flex-shrink: 0;">{{item.staffName}}</text>
				<text class="font-333-28 width-240 ml-20 font-weight-600 font-center" v-if="item.categoryName"
				style="flex-shrink: 0;">{{item.categoryName}} - {{item.itemName}}</text>
				<text class="font-333-28 width-240 ml-20 font-weight-600 font-center" v-else
				style="flex-shrink: 0;">{{item.itemName}}</text>
				<text class="font-333-28 grow-text font-weight-600 font-line-2"
				>{{item.createTime}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasFlow:false,
				startDate:'',
				endDate:'',
				allCount:0,
				
				dataList:[] ,
				listCount:0,
				
				allEmployeeList:[], //员工列表
				allServiceList:[], // 大类列表
				childList:[] , // 子服务项列表
				
				staffId:'' , // 选择的员工id
				staffName:'' , // 选择的员工名称
				
				parentId:'' , // 选择的大类id
				parentName:'' , // 选择的大类名称
				
				itemId:'' , //选择的服务项id
				itemName:'' , // 选择的服务项名称
				
				page:1,
				hasMoreData : false,
				
			}
		},
		
		onPageScroll(e) {
			this.hasFlow = e.scrollTop >= 88
		},
		
		onLoad() {
			this.loadAllEmployee()
			this.loadAllServiceList()
			this.loadAllCount()
			this.loadDataList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++ 
				this.loadDataList()
			}
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadAllCount()
			this.loadDataList()
		},
		
		methods: {
			goBack(){
				uni.navigateBack()
			},
			
			loadAllEmployee(){
				let that = this
				this.http({
					url:'/user/staffList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000,
						status : -1
					},
					success(res){
						if (res.code == 200){
							that.allEmployeeList = []
							that.allEmployeeList.push({'id' : '' , 'userName' : '全部'})
							that.allEmployeeList = [...that.allEmployeeList, ...res.data]
						}
					},
					failed(e){
					}
				})
			},
			
			loadAllServiceList(){
				let that = this
				this.http({
					url:'/user/item/findServiceItemList',
					method:'POST',
					data:{
						'status':-1
					},
					success(res){
						if (res.code == 200){
							res.data.forEach((item)=>{
								let nChildList = []
								nChildList.push({'id' : '' , 'itemName' : '全部'})
								item.childList = [...nChildList , ...item.childList]
							})

							that.allServiceList = []
							that.allServiceList.push({'id' : '' , 'itemName' : '全部' , 'childList' : []})
							that.allServiceList = [...that.allServiceList, ...res.data]
						}
					},
					failed(e){
					}
				})
			},
			
			loadAllCount(){
				let that = this
				this.http({
					url:'/user/performance/findCount',
					method:'POST',
					data:{},
					success(res){
						if (res.code == 200 && res.data){
							that.allCount = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			loadDataList(){
				let that = this
				this.http({
					url:'/user/performance/findLogList',
					method:'POST',
					data:{
						pageNo: that.page,
						pageSize: 20,
						endTime:that.endDate,
						itemId:that.itemId,
						staffId:that.staffId,
						startTime:that.startDate,
						parentId:that.parentId
					},
					success(res){
						if (res.code == 200){
							that.listCount = res.data.totalCount
							if (that.page == 1){
								that.dataList = res.data.logList
							} else{
								that.dataList = [...that.dataList, ...res.data.logList]
							}
							that.hasMoreData = res.data.logList.length >= 20
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//点击重置
			clickReset(){
				this.startDate = ""
				this.endDate = ""
				this.staffId = ""
				this.staffName = ""
				this.itemId = ""
				this.itemName = ""
				this.parentId = ""
				this.parentName = ""
				this.childList = []
				this.page = 1
				this.loadDataList()
			},
			
			changeDateRange(e){
				console.log('changeDateRange=-===' , e)
				this.startDate = e[0]
				this.endDate = e[1]
				this.page = 1
				this.loadDataList()
			},
			
			//修改员工
			changStaff(e){
				this.staffId = this.allEmployeeList[e.detail.value].id
				this.staffName = this.allEmployeeList[e.detail.value].userName
				this.page = 1
				this.loadDataList()
			},
			
			changeParentService(e){
				this.parentId = this.allServiceList[e.detail.value].id
				this.parentName = this.allServiceList[e.detail.value].itemName
				this.childList = this.allServiceList[e.detail.value].childList
				
				this.page = 1
				this.loadDataList()
			},
			
			//修改服务项
			changeServiceItem(e){
				this.itemId = this.childList[e.detail.value].id
				this.itemName = this.childList[e.detail.value].itemName
				console.log('changeServiceItem---' , this.itemId + '   ' + this.itemName)
				this.page = 1
				this.loadDataList()
			}
			
		}
	}
</script>

<style lang="scss">
	.header-bg{
		width: 100%;
		height: 497rpx;
		position: absolute;
		top: 0;
	}
	
	.title-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 88rpx;
		z-index: 50;
		top: 88rpx;
		position: fixed;
	}
	
	.title-box-fixed{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 88rpx;
		z-index: 50;
		position: fixed;
		padding-top: 88rpx;
		background: white;
	}
	
	.back-ic{
		width: 64rpx;
		height: 64rpx;
		padding: 0rpx 22rpx;
		position: absolute;
		left: 0;
	}
	
	.count-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 108rpx);
		height: 122rpx;
		background: white;
		margin: 390rpx 30rpx 20rpx 30rpx;
		z-index: 50;
		border-radius: 16rpx;
		padding: 0rpx 24rpx;
	}
	
	.content-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		background: white;
		border-radius: 16rpx;
		margin: 0rpx 30rpx 30rpx 30rpx;
		padding: 24rpx;
		flex-grow: 1;
		
		.title-line{
			background: linear-gradient(180deg, #EA3D3D 0%, rgba(234, 61, 61, 0) 100%);
			width: 7rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		
		.reset{
			padding: 6rpx 24rpx;
			background: #F94C4B;
			border-radius: 10rpx;
			color: white;
			font-size: 24rpx;
			font-weight: 600;
		}
		
		.picker-width{
			width: 100%;
		}
		
		.option-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 87rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 0rpx 14rpx;
			width: calc(100% - 28rpx);
		}
		
		.grow-text{
			flex-grow: 1;
			text-align: right;
			margin-left: 20rpx;
		}
		
	}
	
	
</style>
